<template>
  <div class="gobang-bgd">
    <div v-for="(item, index) in data" :key="index" class="gobang-bgd-erzi">{{ item }}</div>
    <yuan class="one"></yuan>
    <yuan class="two"></yuan>
    <yuan class="three"></yuan>
    <yuan class="four"></yuan>
    <yuan class="five"></yuan>

  </div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
import yuan from '../heidian/index.vue'
import { ref } from 'vue';
import 'https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js'

const data = ref<string[]>([])
for (let i = 0; i < 196; i++) {
  data.value?.push('')
}

</script>
<style  lang="scss" scoped>
.gobang-bgd {
  width: 620px;
  height: 620px;
  margin: auto;
  background-color: antiquewhite;
  display: flex;
  flex-wrap: wrap;
  padding: 30px;
  position: relative;

  .gobang-bgd-erzi {
    height: 40px;
    width: 40px;
    border: 1px solid black;
  }

  .one {
    position: absolute;
    top: 145px;
    left: 145px;
  }

  .two {
    position: absolute;
    bottom: 145px;
    right: 145px;
  }

  .three {
    position: absolute;
    top: 145px;
    right: 145px;
  }

  .four {
    position: absolute;
    bottom: 145px;
    left: 145px;
  }

  .five {
    position: absolute;
    top: 305px;
    left: 305px;
  }
}
</style>